<template>
  <!-- 预览模板 变量管理 -->
  <div class="newManagement">
    <div class="Tagname">
      变量管理
      <!-- 无数据时 -->
      <div
        v-if="directoryList.length === 0"
        style="height: 80vh"
        class="noData-2"
      >
        <div class="noData">
          <div class="noData-1">暂无数据</div>
        </div>
      </div>
      <div v-else>
        <div v-for="(moduleList,index) in directoryList" :key="index">
          <!-- 一级变量 -->
          <div><h3>{{ moduleList.item_name }}</h3></div>
          <!-- 二级变量 -->
          <div v-if="moduleList.second_item">
            <div v-for="(twoVariable,twoIndex) in moduleList.second_item" :key="twoIndex">
              <div>
                {{ twoVariable.item_name }}
              </div>
              <!-- 回答部分 -->
              <div v-if="twoVariable.question_lists" style="display:flex;flex-wrap:wrap;backgroundColor:#fff; border:1px solid #e6e6e6" class="variable-container">
                <div v-for="answer in twoVariable.question_lists" :key="answer.relation_question_id" style="flex:50%;height:100px">
                  <vuedraggable v-model="twoVariable.question_lists" class="wrap" group="site" animation="300" drag-class="dragClass" ghost-class="ghostClass" chosen-class="chosenClass" @start="onStart" @end="onEnd">
                    <!-- 等于0是变量组 -->
                    <div v-if="answer.question_type == 0" class="newVariable">
                      <div class="nameStyles">
                        {{ answer.question_name }}
                      </div>
                      <div v-if="answer.child_question" class="detailsStyle" style="display:flex;flex-wrap:wrap;backgroundColor:#fff; border:1px solid #e6e6e6">
                        <div v-for="newchild in answer.child_question" :key="newchild.question_id">
                          <!-- 等于1是单选 -->
                          <div v-if="newchild.question_type == 1" class="newVariable">
                            <div class="nameStyles">
                              {{ newchild.question_name }}
                            </div>
                            <div v-if="newchild.option_list" class="detailsStyle">
                              <div v-for="list in newchild.option_list" :key="list.option_id">
                                <el-radio v-model="list.question_id" :label="list.question_name">
                                  {{ list.option_name }}
                                </el-radio>
                              </div>
                            </div>
                          </div>
                          <!-- 等于2是多选 -->
                          <div v-else-if="newchild.question_type == 2" class="newVariable">
                            <div class="nameStyles">
                              {{ newchild.question_name }}
                            </div>
                            <div v-if="newchild.option_list" class="detailsStyle">
                              <el-checkbox-group v-for="lists in newchild.option_list" :key="lists.option_id" v-model="newchild.question_id">
                                <el-checkbox :label="lists.question_id">
                                  {{ lists.option_name }}
                                </el-checkbox>
                              </el-checkbox-group>
                            </div>
                          </div>
                          <!-- 等于3是下拉 -->
                          <div v-else-if="newchild.question_type == 3" class="newVariable">
                            <div class="nameStyles">
                              {{ newchild.question_name }}
                            </div>
                            <div class="detailsStyle">
                              <el-dropdown>
                                <span class="el-dropdown-link">
                                  下拉菜单<i class="el-icon-arrow-down el-icon--right" />
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                  <el-dropdown-item>黄金糕</el-dropdown-item>
                                </el-dropdown-menu>
                              </el-dropdown>
                            </div>

                          </div>
                          <!-- 等于4是附件上传 -->
                          <div v-else-if="newchild.question_type == 4" class="newVariable">
                            <div class="nameStyles">
                              {{ newchild.question_name }}
                            </div>
                            <div class="detailsStyle">
                              <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed"
                                :file-list="fileList"
                              />
                            </div>

                          </div>
                          <!-- 等于5是单行文本 -->
                          <div v-else-if="newchild.question_type == 5" class="newVariable">
                            <div class="nameStyles">
                              {{ newchild.question_name }}
                            </div>
                            <div class="detailsStyle">
                              <el-input v-model="newchild.create_type" style="width:150px" />
                            </div>

                          </div>
                          <!-- 等于6是多行文本 -->
                          <div v-else-if="newchild.question_type == 6" class="newVariable">
                            <div class="nameStyles">
                              {{ newchild.question_name }}
                            </div>
                            <div class="detailsStyle">
                              <el-input style="width: 60%;height:5%" placeholder="请输入内容" />
                            </div>

                          </div>
                          <!-- 等于7是时间 -->
                          <div v-else-if="newchild.question_type == 7" class="newVariable">
                            <div class="nameStyles">
                              {{ newchild.question_name }}
                            </div>
                            <div class="detailsStyle">
                              <el-date-picker
                                v-model="newchild.question_type"
                                type="datetime"
                                placeholder="选择日期时间"
                              />
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 等于1是单选 -->
                    <div v-else-if="answer.question_type == 1" class="newVariable">
                      <div class="nameStyle" style="width:15%;padding:4% 0 0 5%">
                        {{ answer.question_name }}
                      </div>
                      <div v-if="answer.option_list" class="detailsStyle">
                        <div v-for="list in answer.option_list" :key="list.option_id">
                          <el-radio v-model="list.question_id" :label="list.question_name">
                            {{ list.option_name }}
                          </el-radio>
                        </div>
                      </div>

                    </div>
                    <!-- 等于2是多选 -->
                    <div v-else-if="answer.question_type == 2" class="newVariable">
                      <div class="nameStyle">
                        {{ answer.question_name }}
                      </div>

                      <div v-if="answer.option_list" class="detailsStyle">
                        <!-- <span v-for="lists in answer.option_list" :key="lists.option_id"> -->
                        <el-checkbox-group v-for="lists in answer.option_list" :key="lists.option_id" v-model="answer.question_id">
                          <el-checkbox :label="lists.question_id">
                            {{ lists.option_name }}
                          </el-checkbox>
                        </el-checkbox-group>
                        <!-- </span> -->

                      </div>

                    </div>
                    <!-- 等于3是下拉 -->
                    <div v-else-if="answer.question_type == 3" class="newVariable">
                      <div class="nameStyle">
                        {{ answer.question_name }}
                      </div>
                      <div v-if="answer.option_list" class="detailsStyle">
                        <el-dropdown>
                          <span class="el-dropdown-link">
                            下拉菜单<i class="el-icon-arrow-down el-icon--right" />
                          </span>
                          <el-dropdown-menu slot="dropdown" class="wrap" group="site" animation="100" drag-class="dragClass" ghost-class="ghostClass" chosen-class="chosenClass" @start="onStart" @end="onEnd">
                            <el-dropdown-item v-for="lists in answer.option_list" :key="lists.option_id">
                              {{ lists.option_name }}
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>

                    </div>
                    <!-- 等于4是附件上传 -->
                    <div v-else-if="answer.question_type == 4" class="newVariable">
                      <div class="nameStyle">
                        {{ answer.question_name }}
                      </div>
                      <div class="detailsStyle">
                        <el-upload
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          multiple
                          :limit="3"
                          :on-exceed="handleExceed"
                          :file-list="fileList"
                        />
                      </div>

                    </div>
                    <!-- 等于5是单行文本 -->
                    <div v-else-if="answer.question_type == 5" class="newVariable">
                      <div class="nameStyle">
                        {{ answer.question_name }}
                      </div>
                      <div class="detailsStyle">
                        <el-input v-model="answer.create_type" style="width:150px" />
                      </div>

                    </div>
                    <!-- 等于6是多行文本 -->
                    <div v-else-if="answer.question_type == 6" class="newVariable">
                      <div class="nameStyle">
                        {{ answer.question_name }}
                      </div>
                      <div class="detailsStyle">
                        <el-input style="width: 60%;height:5%" placeholder="请输入内容" />
                      </div>

                    </div>
                    <!-- 等于7是时间 -->
                    <div v-else-if="answer.question_type == 7" class="newVariable">
                      <div class="nameStyle">
                        {{ answer.question_name }}
                      </div>
                      <div class="detailsStyle">
                        <el-date-picker
                          v-model="answer.question_type"
                          type="datetime"
                          placeholder="选择日期时间"
                        />
                      </div>

                    </div>
                  </vuedraggable>
                </div>

              </div>

            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- 右侧固定部分 -->
    <div class="RightFixed">
      固定部分
      <vuedraggable v-model="selfDefinedTemplate" class="wrap" group="site" animation="100" drag-class="dragClass" ghost-class="ghostClass" chosen-class="chosenClass" @start="onStart" @end="onEnd">
        <div v-for="item in selfDefinedTemplate" :key="item.item_id" style="height:20%;border:2px solid red;paddingTop:10%">
          {{ item.item_name }}
        </div>
      </vuedraggable>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    selfDefinedTemplate: { type: Array, deafult: () => [] }, // 这里就是右侧固定部分
    directoryList: { type: Array, deafult: () => [] } // 这里就是渲染的内容
  },
  data() {
    return {
      drag: false // 这里是拖拽
    }
  },
  methods: {
    // 开始拖拽
    onStart(e) {
      console.log(e)
      this.drag = true
      console.log('开始')
    },
    // 结束拖拽
    onEnd() {
      this.drag = false
      // console.log('arr1', this.arr1)
      // console.log('arr2', this.arr2)
    }
  }
}
</script>

<style lang="scss" scoped>
.newManagement {
  display: flex;
  // width: 100%;
  // height: 100%;
  .Tagname {
    flex: 1;
    // background-color: #5cf;
    margin-right: 1%;
  }
.RightFixed {
  width: 15%;
  height: 200px;
  // background-color: #1a1;
}
}

</style>
